/**
 * 绘制矩形
 *
 * @param {*} ctx 画布
 * @param {Number} radius 圆角半径
 * @param {Number} x 左上角
 * @param {Number} y 左上角
 * @param {Number} width 宽度
 * @param {Number} height 高度
 * @param {String} color 颜色
 * @param {String} mode 填充模式  fill  stroke
 * @param {Function} fn 回调函数
 */
function drawRect({ ctx, x, y, radius, width, height, color, mode }) {
  // 左上圆角
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.arcTo(x + width, y, x + width, y + height, radius);
  ctx.arcTo(x + width, y + height, x, y + height, radius);
  ctx.arcTo(x, y + height, x, y, radius);
  ctx.arcTo(x, y, x + width, y, radius);
  ctx.closePath();
  if (mode === "fill") {
    ctx.fillStyle = color;
    ctx.fill();
  } else {
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}
/**
 * 绘制图片(矩形、圆)
 *
 * @param {*} ctx 画布
 * @param {*} img http地址
 * @param {Number} x 左下角定点 x 轴坐标
 * @param {Number} y 左下角定点 y 轴坐标
 * @param {Number} width 宽
 * @param {Number} height 高
 * @param {Number} radius 圆角半径
 * @param {String} color 颜色
 * @param {String} mode circle[圆] rect[矩形]
 */
function drawImage({
  ctx,
  img,
  x,
  y,
  width,
  height,
  radius = 1,
  color = "#fff",
  mode = "circle"
}) {
  return new Promise((resolve) => {
    uni.getImageInfo({
      src: img,
      success: function (image) {
        // console.log("image:", image);
        // console.log(image.width);
        // console.log(image.height);

        const imgUrl = image.path;
        ctx.save();
        if (mode === "circle") {
          // 圆形图片
          ctx.beginPath();
          const d = radius * 2;
          const cx = x + radius;
          const cy = y + radius;
          ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
          ctx.strokeStyle = color;

          ctx.stroke();
          ctx.clip();
          ctx.drawImage(imgUrl, x, y, d, d);
        } else {
          // 矩形图片
          ctx.beginPath();
          ctx.moveTo(x + radius, y);
          ctx.arcTo(x + width, y, x + width, y + height, radius);
          ctx.arcTo(x + width, y + height, x, y + height, radius);
          ctx.arcTo(x, y + height, x, y, radius);
          ctx.arcTo(x, y, x + width, y, radius);
          ctx.closePath();

          ctx.strokeStyle = color;
          ctx.stroke();

          ctx.clip();
          ctx.drawImage(imgUrl, x, y, width, height);
        }
        ctx.restore();

        resolve(true);
      }
    });
  });
}

/**
 * 绘制多行片段
 *
 * @param {*} ctx         画布
 * @param {*} str     内容
 * @param {*} x           绘制左下角原点 x 坐标
 * @param {*} y           绘制左下角原点 y 坐标
 * @param {*} maxWidth    最大宽度
 * @param {*} font        字体家族
 * @param {*} color       字体颜色
 * @param {*} lineHeight  设置行高
 * @param {*} maxLine 最大行数
 */
function drawParagraph({
  ctx,
  str,
  x,
  y,
  maxWidth,
  font: {
    fontUnit = "px",
    fontSize = 14,
    fontStyle = "normal",
    fontWeight = 400,
    fontFamily = "PingFang SC"
  },
  color = "#000",
  // 默认等于fontSize
  lineHeight = 14,
  maxLine = 1
}) {
  // 字体颜色
  ctx.fillStyle = color;
  // 字体样式
  ctx.font = `${fontStyle} ${fontWeight} ${fontSize + fontUnit} ${fontFamily}`;
  // 保证 lineHeight > fontSize
  lineHeight = lineHeight < fontSize ? fontSize + 2 : lineHeight;

  // ----------  单行文本  ----------
  if (maxLine === 1) {
    let strWidth = ctx.measureText(str).width;
    const ellipsis = "…";
    const ellipsisWidth = ctx.measureText(ellipsis).width;
    if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {
      ctx.fillText(str, x, y);
    } else {
      var len = str.length;
      while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {
        str = str.slice(0, len);
        strWidth = ctx.measureText(str).width;
      }
      ctx.fillText(str + ellipsis, x, y);
    }

    return;
  }

  // ----------  多行文本  ----------
  // 当前绘制的内容
  let drawTxt = "";
  // 第几行开始绘制
  let drawLine = 1;
  // 当前绘制内容的索引
  let drawIndex = 0;

  // 判断内容是否可以一行绘制完毕
  if (ctx.measureText(str).width <= maxWidth) {
    ctx.fillText(str.substring(drawIndex, i), x, y);
  } else {
    for (var i = 0; i < str.length; i++) {
      drawTxt += str[i];
      if (ctx.measureText(drawTxt).width >= maxWidth) {
        if (drawLine >= maxLine) {
          ctx.fillText(str.substring(drawIndex, i) + "..", x, y);
          break;
        } else {
          ctx.fillText(str.substring(drawIndex, i + 1), x, y);
          drawIndex = i + 1;
          drawLine += 1;
          y += lineHeight;
          drawTxt = "";
        }
      } else {
        // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
        if (i === str.length - 1) {
          ctx.fillText(str.substring(drawIndex), x, y);
        }
      }
    }
  }
}

export { drawRect, drawImage, drawParagraph };
